<template>
  <!-- 场地分类 -->
  <div>
    <el-descriptions :column="1" border style="margin: 8px 40px" height="300px">
      <el-descriptions-item
        label-class-name="title-background"
        label-align="center"
      >
        <template #label class="Afont" style="height: 300px">
          <div>
            <el-icon>
              <Avatar />
            </el-icon>
            校区
          </div>
        </template>
        <el-checkbox-group
          v-model="industry"
          @change="onFilterChange"
          class="Afont"
        >
          <el-checkbox value="相思湖校区">相思湖校区</el-checkbox>
          <el-checkbox value="思源湖校区">思源湖校区</el-checkbox>
          <el-checkbox value="武鸣校区">武鸣校区</el-checkbox>
        </el-checkbox-group>
      </el-descriptions-item>
      <el-descriptions-item
        label-class-name="title-background"
        label-align="center"
      >
        <template #label>
          <div>
            <el-icon>
              <WalletFilled />
            </el-icon>
            类型
          </div>
        </template>
        <el-checkbox-group
          v-model="money"
          @change="onFilterChange"
          class="Afont"
        >
          <el-checkbox value="篮球">篮球</el-checkbox>
          <el-checkbox value="羽毛球">羽毛球</el-checkbox>
          <el-checkbox value="乒乓球">乒乓球</el-checkbox>
          <el-checkbox value="网球">网球</el-checkbox>
          <el-checkbox value="足球">足球</el-checkbox>
          <el-checkbox value="游泳">游泳</el-checkbox>
          <el-checkbox value="舞蹈">舞蹈</el-checkbox>
          <el-checkbox value="拳击">拳击</el-checkbox>
          <el-checkbox value="排球">排球</el-checkbox>
          <el-checkbox value="桌球">桌球</el-checkbox>
          <el-checkbox value="健身">健身</el-checkbox>
        </el-checkbox-group>
      </el-descriptions-item>
    </el-descriptions>
  </div>
  <!-- 场地列表 -->
  <div style="margin: 45px 40px">
    <el-row :gutter="20">
      <template v-for="item in positionList">
        <el-col :span="6" style="margin-bottom: 20px">
          <position-card :item="item"></position-card>
        </el-col>
      </template>
    </el-row>
  </div>
  <!-- 更多场地 -->
  <div style="text-align: center">
    <el-button type="primary" plain size="large" @click="more"
      >更多场地</el-button
    >
  </div>
</template>

<script setup>
import { Avatar, WalletFilled } from "@element-plus/icons-vue";
import { ref, onMounted, watch } from "vue";
import PositionCard from "@/components/PositionCard.vue";
import axios from "axios";
import { useRoute } from "vue-router";

const industry = ref([]); // 校区
const money = ref([]); // 类型
const positionList = ref([]);
const page = ref(1);
const loading = ref(false);
const route = useRoute();

onMounted(async () => {
  const yardType = route.query.yard_type;
  if (yardType) {
    money.value = [yardType];
  }
  await getPositionList();
});

watch(route, async (newRoute) => {
  const yardType = newRoute.query.yard_type;
  if (yardType) {
    money.value = [yardType];
  }
  await getPositionList();
});

const getPositionList = async (limit = 3, append = false) => {
  // start loading
  loading.value = true;
  try {
    const res = await axios.get(`http://localhost:8000/YardInfo/getYardList2`, {
      params: {
        page: page.value,
        limit: limit,
        campusname: industry.value.join(","), // 添加校区过滤参数
        yard_type: money.value.join(","), // 添加运动类型过滤参数
      },
    });
    if (append) {
      positionList.value = positionList.value.concat(res.data);
    } else {
      positionList.value = res.data;
    }
    page.value = page.value + 1;
  } catch (error) {
    console.error("Error fetching yard list:", error);
  } finally {
    // end loading
    loading.value = false;
  }
};

function more() {
  getPositionList(4, true);
}

function onFilterChange() {
  page.value = 1;
  positionList.value = [];
  getPositionList();
}
</script>

<style scoped>
:deep(.title-background) {
  width: 120px;
}
.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
.Afont {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 20px;
}
</style>
